<script setup>
import { onMounted, ref } from 'vue'
import dayjs from 'dayjs'
import { auditAPI, done, teacherCourse, todayCourseList, todo } from '@/api/teacher'
// import { showNotify } from 'vant'
import router from '@/router'

const pass = require('../image/tg.png') // 通过
const failPass = require('../image/btg.png') // 不通过
const activeIndex = ref(0)
const list = ref([])
// const database64 = ref('')
const holidayList = ref([])
const dateShow = ref(false)
const dateField = ref(false)

const titleList = ref([
	{
		title: '今日课程',
		url: require('../image/jrkc.png'),
	},
	{
		title: '待办',
		url: require('../image/qj.png'),
	},
	{
		title: '已办',
		url: require('../image/ycsq.png'),
	},
])
const holiday = ref({
	courseList: [],
	typeList: [
		{
			text: '请假审批',
			value: '0',
		},
		{
			text: '异常处理',
			value: '1',
		},
	],
})
const queryParam = ref({
	courseNo: '',
	status: '',
	type: '',
	startDate: '',
	endDate: '',
	typeId: '0',
})
const exceptionList = ref([])
const exception = ref({
	courseList: [],
	typeList: [
		{
			text: '请假审批',
			value: '0',
		},
		{
			text: '异常处理',
			value: '1',
		},
	],
})
const expQueryParam = ref({
	courseNo: '',
	status: '',
	type: '',
	startDate: '',
	endDate: '',
	typeId: '0',
})

// 获取今日课程数据
const infoData = () => {
	list.value = []
	todayCourseList().then((res) => {
		if (res) {
			list.value = res.data
		}
	})
}

// 随机背景色
const randomBackground = () => {
	const num = Math.floor(Math.random() * 3)
	return num === 0 ? '#E4F5DC' : num === 1 ? '#FFEBEB' : '#F6F2D0'
}

// 前往考勤统计页面
const goToKaoQin = (item) => {
	const obj1 = {}
	const courseList = list.value.reduce((cur, next) => {
		obj1[next.courseId] ? '' : (obj1[next.courseId] = true && cur.push(next))
		return cur
	}, [])
	console.log('courseList', JSON.stringify(courseList))
	const obj2 = {}
	const classList = list.value.reduce((cur, next) => {
		obj2[next.classNo] ? '' : (obj2[next.classNo] = true && cur.push(next))
		return cur
	}, [])
	console.log('classList', JSON.stringify(classList))
	let param = {
		courseList,
		currentCourse: item.courseId,
		currentClass: item.classNo,
		classList,
	}
	router.replace({
		path: '/todayStat',
		query: { param: JSON.stringify(param) },
	})
}

const audit = async (item, status) => {
	item.status = status
	const res = await auditAPI(item)
	if (res) {
		getHolidayList()
		getExceptionList()
	}
}
const tabDay = (i) => {
	activeIndex.value = i
	localStorage.setItem('home-item', i)
	if (i === 0) {
		infoData()
	}
}

//选择时间 确认
const chooseDate = (value) => {
	console.log('dateField', dateField.value)
	console.log('value', value)
	if (activeIndex.value === 1) {
		queryParam.value[dateField.value] = dayjs(value.selectedValues).format('YYYY-MM-DD')
		getHolidayList()
	}
	if (activeIndex.value === 2) {
		expQueryParam.value[dateField.value] = dayjs(value.selectedValues).format('YYYY-MM-DD')
		getExceptionList()
	}
	cancelDate()
}
//时间选择关闭
const cancelDate = () => {
	dateShow.value = false
}
//打开时间选择
const pickDate = (item) => {
	dateField.value = item
	dateShow.value = true
}
const getHolidayParam = () => {
	list.value = []
	holiday.value.courseList = []
	exception.value.courseList = []
	teacherCourse().then((res) => {
		res.data.forEach((el) => {
			let param = {
				text: el.courseName,
				value: el.courseNo,
			}
			holiday.value.courseList.push(param)

			let paramExp = {
				text: el.courseName,
				value: el.courseNo,
			}
			exception.value.courseList.push(paramExp)
		})
		queryParam.value.courseNo = holiday.value.courseList[0].value
		expQueryParam.value.courseNo = exception.value.courseList[0].value
		getHolidayList()
		getExceptionList()
	})
}

// 获取待办数据
const getHolidayList = () => {
	todo(queryParam.value).then((res) => {
		res.data.forEach((e) => {
			e.createTime = dayjs(e.createTime).format('YYYY-MM-DD')
		})
		holidayList.value = res.data
	})
}

// 获取已办数据
const getExceptionList = () => {
	done(expQueryParam.value).then((res) => {
		res.data.forEach((e) => {
			e.createTime = dayjs(e.createTime).format('YYYY:MM:DD')
		})
		exceptionList.value = res.data
	})
}

onMounted(() => {
	let dataIndex = +localStorage.getItem('home-item')
	tabDay(dataIndex ? dataIndex : 0) // 页面刷新后，默认显示第一个tab
	infoData()
	getHolidayParam()
})
</script>

<template>
	<div class="pages">
		<p class="title">智能考勤管理系统教师端</p>
		<div class="content">
			<!-- 顶部菜单 start -->
			<div class="menu">
				<div
					class="row"
					v-for="(item, index) in titleList"
					:key="index"
					:class="index === activeIndex ? 'active' : ''"
					@click="tabDay(index)"
				>
					<img :src="item.url" alt="" />
					<div>{{ item.title }}</div>
				</div>
			</div>
			<!-- 顶部菜单 end -->
			<!-- 今日课程 start -->
			<div v-if="activeIndex === 0" class="day-work">
				<div
					v-for="(item, index) in list"
					:key="index"
					class="row"
					:style="{ background: randomBackground() }"
				>
					<div class="classname">{{ item.courseName }}</div>
					<div class="classData">
						<p class="classTime">
							{{ item.courseWeek }}&nbsp;&nbsp;{{ item.startTime }}-{{ item.endTime }}
						</p>
						<p class="classLocation">{{ item.address }}</p>
						<p class="classLocation">{{ item.className }}</p>
						<div>
							<van-button round block type="primary" @click="goToKaoQin(item)">查看考勤</van-button>
						</div>
					</div>
				</div>
			</div>
			<!-- 今日课程 end -->
			<!-- 待办 start -->
			<div v-if="activeIndex === 1" class="holiday">
				<div>
					<van-dropdown-menu>
						<van-dropdown-item
							v-model="queryParam.courseNo"
							:options="holiday.courseList"
							@change="getHolidayList"
						/>
						<van-dropdown-item
							v-model="queryParam.typeId"
							:options="holiday.typeList"
							@change="getHolidayList"
						/>
					</van-dropdown-menu>
				</div>

				<div class="date">
					<van-cell-group class="date-picker" style="display: flex">
						<van-field
							size="large"
							:readonly="true"
							:clearable="true"
							v-model="queryParam.startDate"
							@click="pickDate('startDate')"
							placeholder=""
							left-icon="calendar-o"
						/>
						<span style="line-height: 50px">至</span>
						<van-field
							size="large"
							:readonly="true"
							:clearable="true"
							v-model="queryParam.endDate"
							@click="pickDate('endDate')"
							placeholder=""
							left-icon="calendar-o"
						/>
					</van-cell-group>
				</div>
				<div>
					<van-date-picker
						@confirm="chooseDate"
						@cancel="cancelDate"
						v-if="dateShow"
						type="date"
						title="选择年月日"
						:min-date="minDate"
						:max-date="maxDate"
					/>
				</div>

				<div>
					<div v-for="(item, index) in holidayList" :key="index">
						<!-- 请假审批 -->
						<div class="holiday-item" v-if="+item.typeId === 0">
							<p class="holiday-item-title">{{ item.studentName }}({{ item.studentNo }})</p>
							<p class="holiday-item-title">
								{{ item.courseName }}
							</p>
							<p class="holiday-item-title">
								{{ item.createTime }}&nbsp;&nbsp;&nbsp;{{ item.startTime }}-{{ item.endTime }}
							</p>
							<p class="holiday-item-content">{{ item.reason }}</p>
							<p class="holiday-item-content">{{ item.leaveType }}</p>
							<div class="holiday-item-button">
								<van-button
									round
									size="large"
									style="margin-right: 10px"
									type="success"
									@click="audit(item, 1)"
									>不通过
								</van-button>
								<van-button
									round
									style="margin-left: 10px"
									size="large"
									type="primary"
									@click="audit(item, 100)"
									>通过
								</van-button>
							</div>
						</div>
						<!-- 异常审批 -->
						<div class="holiday-item" v-if="+item.typeId === 1">
							<p class="holiday-item-title">{{ item.studentName }}({{ item.studentNo }})</p>
							<p class="holiday-item-title">
								{{ item.courseName }}
							</p>
							<p class="holiday-item-title">
								{{ item.createTime }}&nbsp;&nbsp;&nbsp;{{ item.startTime }}-{{ item.endTime }}
							</p>
							<p class="holiday-item-content">
								<span>{{ +item.typeId === 8 ? '上课打卡时间' : '下课打卡时间' }}</span>
								&nbsp;&nbsp;&nbsp;{{ item.attendsTime || '--' }}
							</p>
							<p class="holiday-item-content">{{ item.leaveType }}</p>
							<p class="holiday-item-content">
								考勤状态&nbsp;&nbsp;&nbsp;{{
									+item.statusId === 11 ? '迟到' : +item.statusId === 12 ? '早退' : '缺卡'
								}}
							</p>
							<div>申请说明&nbsp;&nbsp;&nbsp;{{ item.reason }}</div>
							<div class="holiday-item-button">
								<van-button
									round
									size="large"
									style="margin-right: 10px"
									type="success"
									@click="audit(item, 1)"
									>不通过
								</van-button>
								<van-button
									round
									style="margin-left: 10px"
									size="large"
									type="primary"
									@click="audit(item, 100)"
									>通过
								</van-button>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 待办 end -->
			<!-- 已办 start -->
			<div v-if="activeIndex === 2" class="holiday">
				<div>
					<van-dropdown-menu>
						<van-dropdown-item
							v-model="queryParam.courseNo"
							:options="exception.courseList"
							@change="getExceptionList"
						/>
						<van-dropdown-item
							v-model="expQueryParam.typeId"
							:options="exception.typeList"
							@change="getExceptionList"
						/>
					</van-dropdown-menu>
				</div>

				<div class="date">
					<van-cell-group class="date-picker" style="display: flex">
						<van-field
							size="large"
							:readonly="true"
							:clearable="true"
							v-model="queryParam.startDate"
							@click="pickDate('startDate')"
							placeholder=""
							left-icon="calendar-o"
						/>
						<span style="line-height: 50px">至</span>
						<van-field
							size="large"
							:readonly="true"
							:clearable="true"
							v-model="expQueryParam.endDate"
							@click="pickDate('endDate')"
							placeholder=""
							left-icon="calendar-o"
						/>
					</van-cell-group>
				</div>
				<div>
					<van-date-picker
						@confirm="chooseDate"
						@cancel="cancelDate"
						v-if="dateShow"
						type="date"
						title="选择年月日"
						:min-date="minDate"
						:max-date="maxDate"
					/>
				</div>

				<div>
					<div v-for="(item, index) in exceptionList" :key="index">
						<!-- 请假审批 -->
						<div class="holiday-item" v-if="+item.typeId === 0">
							<img v-if="+item.status !== 0" :src="+item.status === 100 ? pass : failPass" alt="" />
							<p class="holiday-item-title">{{ item.studentName }}({{ item.studentNo }})</p>
							<p class="holiday-item-title">
								{{ item.courseName }}
							</p>
							<p class="holiday-item-title">
								{{ item.createTime }}&nbsp;&nbsp;&nbsp;{{ item.startTime }}-{{ item.endTime }}
							</p>
							<p class="holiday-item-content">{{ item.reason }}</p>
							<p class="holiday-item-content">{{ item.leaveType }}</p>
						</div>
						<!-- 异常审批 -->
						<div class="holiday-item" v-if="+item.typeId === 1">
							<img v-if="+item.status !== 0" :src="+item.status === 100 ? pass : failPass" alt="" />
							<p class="holiday-item-title">{{ item.studentName }}({{ item.studentNo }})</p>
							<p class="holiday-item-title">
								{{ item.courseName }}
							</p>
							<p class="holiday-item-title">
								{{ item.createTime }}&nbsp;&nbsp;&nbsp;{{ item.startTime }}-{{ item.endTime }}
							</p>
							<p class="holiday-item-content">
								<span>{{ +item.typeId === 8 ? '上课打卡时间' : '下课打卡时间' }}</span>
								&nbsp;&nbsp;&nbsp;{{ item.attendsTime || '--' }}
							</p>
							<p class="holiday-item-content">
								考勤状态&nbsp;&nbsp;&nbsp;{{
									+item.statusId === 11 ? '迟到' : +item.statusId === 12 ? '早退' : '缺卡'
								}}
							</p>
							<div>申请说明&nbsp;&nbsp;&nbsp;{{ item.reason }}</div>
						</div>
					</div>
				</div>
			</div>
			<!-- 已办 end -->
		</div>
	</div>
</template>

<style scoped lang="scss">
:root {
	--van-button-large-height: 20px;
}

.pages {
	padding-bottom: 34px;
	box-sizing: border-box;

	& > .title {
		font-size: 44px;
		font-family: 'Microsoft YaHei UI', sans-serif;
		font-weight: 400;
		color: #ffffff;
		letter-spacing: 1px;
		text-shadow: 0 4px 8px #1e96e1;
		padding: 94px 0 58px;
		text-align: center;
	}

	.content {
		padding: 0 30px;
		box-sizing: border-box;
		height: 100%;

		.menu {
			display: flex;
			justify-content: space-between;

			& > div {
				width: 175px;
				height: 175px;
				background: #ddf0ff;
				border-radius: 50%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-size: 28px;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-weight: 600;
				color: #4690c0;

				& > img {
					width: 80px;
					height: 80px;
					margin-bottom: 10px;
				}

				&.active {
					background: #ffffff;
					color: #000000;
				}
			}
		}

		.day-work {
			margin-top: 40px;
			background: #ffffff;
			border-radius: 16px 16px 16px 16px;
			width: 100%;
			/* padding: 24px 28px; */
			box-sizing: border-box;

			.row {
				min-height: 320px;
				/* background: #f6f2d0; */
				border-radius: 16px;
				padding: 22px 50px 30px;
				box-sizing: border-box;
				margin-bottom: 20px;

				.classname {
					font-size: 28px;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-weight: 500;
					color: #000000;
					margin-bottom: 20px;
				}

				.classData {
					width: 586px;
					min-height: 220px;
					background: #ffffff;
					border-radius: 20px;
					padding: 30px 48px 24px;
					box-sizing: border-box;

					.classTime {
						text-align: center;
						font-size: 32px;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-weight: 600;
						color: #000000;
						margin-bottom: 16px;
					}

					.classLocation {
						font-size: 24px;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-weight: 400;
						color: #666666;
						margin-bottom: 34px;
						text-align: center;
					}

					.submit {
						display: flex;
						justify-content: space-between;

						div {
							width: 212px;
							height: 60px;
							border-radius: 30px;
							font-size: 28px;
							font-family: 'Microsoft YaHei UI', sans-serif;
							font-weight: 600;
							color: #ffffff;
							display: flex;
							justify-content: center;
							align-items: center;
						}

						.attendClass {
							background: linear-gradient(180deg, #85f3c3 0%, #3cdb4e 100%);
							box-shadow: 0 4px 6px 0 rgba(59, 204, 140, 0.4);
						}

						.attendClass-disabled {
							background: linear-gradient(180deg, #85f3c3 0%, #3cdb4e 100%);
							box-shadow: 0 4px 6px 0 rgba(59, 204, 140, 0.4);
							opacity: 0.39;
						}

						.getOutOfClass {
							background: linear-gradient(180deg, #78d9ff 0%, #22baff 100%);
							box-shadow: 0 4px 6px 0 rgba(46, 169, 255, 0.4);
						}

						.getOutOfClass-disabled {
							background: linear-gradient(180deg, #78d9ff 0%, #22baff 100%);
							box-shadow: 0 4px 6px 0 rgba(46, 169, 255, 0.4);
							opacity: 0.39;
						}
					}
				}
			}
		}

		.holiday {
			margin-top: 40px;

			.date {
				margin-top: 40px;
			}

			.date-picker {
				display: flex;
				justify-items: center;
			}

			.holiday-item {
				margin-top: 30px;
				position: relative;
				background-color: rgba(255, 255, 255, 1);
				border-radius: 8px;
				padding: 30px;

				& > img {
					width: 150px;
					height: 150px;
					position: absolute;
					right: 0;
					top: 0;
				}

				.holiday-item-title {
					font-size: 35px;
					font-weight: 600;
					text-align: left;
					line-height: 45px;
				}

				.holiday-item-content {
					line-height: 45px;
					color: rgba(153, 153, 153, 1);
				}

				.holiday-item-button {
					display: flex;
					justify-content: space-between;
				}
			}
		}
	}
}
</style>
